<template>
  <view class="container" v-if="!isLoading">
    <!-- 标题 -->
    <view class="page-title">留言</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx"  >
        
		
        <u-form-item label="内容" prop="context" :border-bottom="false">
          <u-input v-model="form.context" type="textarea" placeholder="留言内容" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">提交</view>
      </view>
    </view>
  </view>
</template>

<script>
  import SelectRegion from '@/components/select-region/select-region'
  import { isMobile } from '@/utils/verify'
  import * as AddressApi from '@/api/address'
  import * as EduApi from '@/api/edu'
  // 表单字段元素
  const form = {
    name: '',
    phone: '',
    num: '',
    comtitle: '',
    context: '',
    region: [],
    detail: ''
  }

  // 表单验证规则
  const rules = {
    name: [{
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change']
    }],
	num: [{
	  required: true,
	  message: '请输入工号',
	  trigger: ['blur', 'change']
	}],
	comtitle: [{
	  required: true,
	  message: '请输入标题',
	  trigger: ['blur', 'change']
	}],
	context: [{
	  required: true,
	  message: '请输入内容',
	  trigger: ['blur', 'change']
	}],
    phone: [{
      required: true,
      message: '请输入手机号',
      trigger: ['blur', 'change']
    }, {
      // 自定义验证函数
      validator: (rule, value, callback) => {
        // 返回true表示校验通过，返回false表示不通过
        return isMobile(value)
      },
      message: '手机号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['blur'],
    }],
    region: [{
      required: true,
      message: '请选择投诉部门',
      trigger: ['blur', 'change'],
      type: 'array'
    }],
    detail: [{
      required: true,
      message: '请输入详细地址',
      trigger: ['blur', 'change']
    }],
  }

  export default {
    components: {
      SelectRegion
    },
    data() {
      return {
        form,
        rules,
        // 按钮禁用
        disabled: false,
		num:'',
		name:'',
		phone:'',
		context:'',
		comtitle:'',
		userId:'',
		content:'',
		pic:'',
		multiArray: [
			['投诉', '建议'],
			['制造部', '质量部', '行政人力部', '设备动力部', '外派科室'],
			['焊装车间', '冲压车间', '涂装车间', '工艺管理科', 'KD车间']
		],
		multiIndex: [0, 0, 0],
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
	
    onLoad(options) {
		  
	},

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },

    methods: {

      // 表单提交
      handleSubmit() {
        const app = this
		app.userId=this.$userMsg.id 
        if (app.disabled) {
          return false
        }
        app.$refs.uForm.validate(valid => {
          if (valid) {
            app.disabled = true
            EduApi.addLeave({userId:app.userId,content:form.context})
              .then(result => {
				  uni.showModal({
				  	content: '留言成功' ,
				  	showCancel: false,
				  });
				
				  // this.$refs.uForm.resetFields();
                // app.$toast(result.message)
                // uni.navigateBack()
              })
              .finally(() =>{
				  app.disabled = false
				   
			  })
          }
        })
      },
	  
	  
	  bindMultiPickerColumnChange: function(e) {
	  	console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
	  	this.multiIndex[e.detail.column] = e.detail.value
	  	switch (e.detail.column) {
	  		case 0: //拖动第1列
	  			switch (this.multiIndex[0]) {
	  				case 0:
	  					this.multiArray[1] = ['制造部', '质量部', '行政人力部', '设备动力部', '外派科室']
	  					this.multiArray[2] = ['焊装车间', '冲压车间', '涂装车间', '工艺管理科', 'KD车间']
	  					break
	  				case 1:
	  					this.multiArray[1] = ['制造部', '质量部', '行政人力部', '设备动力部', '外派科室']
	  					this.multiArray[2] = ['焊装车间', '冲压车间', '涂装车间', '工艺管理科', 'KD车间']
	  					break
	  			}
	  			this.multiIndex.splice(1, 1, 0)
	  			this.multiIndex.splice(2, 1, 0)
	  			break
	  		case 1: //拖动第2列
	  			switch (this.multiIndex[0]) { //判断第一列是什么
	  				case 0:
	  					switch (this.multiIndex[1]) {
	  						case 0:
	  							this.multiArray[2] = ['焊装车间', '冲压车间', '涂装车间', '工艺管理科', 'KD车间']
	  							break
	  						case 1:
	  							this.multiArray[2] = ['质量保障科','检验科','质量技术科']
	  							break
	  						case 2:
	  							this.multiArray[2] = ['安全环保科','行政人力科','鄂尔多斯计划物流科']
	  							break
	  						case 3:
	  							this.multiArray[2] = ['设备保全科','工厂工程科']
	  							break
	  						case 4:
	  							this.multiArray[2] = ['业务财务部','鄂尔多斯工厂','产品技术管理部','资源管理模块']
	  							break
	  					}
	  					break
	  				case 1:
	  					switch (this.multiIndex[1]) {
	  						case 0:
	  							this.multiArray[2] = ['焊装车间', '冲压车间', '涂装车间', '工艺管理科', 'KD车间']
	  							break
	  						case 1:
	  							this.multiArray[2] = ['质量保障科','检验科','质量技术科']
	  							break
	  						case 2:
	  							this.multiArray[2] = ['安全环保科','行政人力科','鄂尔多斯计划物流科']
	  							break
	  						case 3:
	  							this.multiArray[2] = ['设备保全科','工厂工程科']
	  							break
	  						case 4:
	  							this.multiArray[2] = ['业务财务部','鄂尔多斯工厂','产品技术管理部','资源管理模块']
	  							break
	  					}
	  					break
	  			}
	  			this.multiIndex.splice(2, 1, 0)
	  			break
	  	}
	  	this.$forceUpdate()
	  },
	 

    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
  .page-title {
    width: 94%;
    margin: 0 auto;
    padding-top: 40rpx;
    font-size: 28rpx;
    color: rgba(69, 90, 100, 0.6);
  }

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  /* 底部操作栏 */

  .footer {
    margin-top: 60rpx;
	.btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }

  }
</style>
